<template>
  <div>
    <h2>JVM 性能监控</h2>

    <div class="cards">
      <div>Heap Used: {{ latest.heapMemoryUsed.toFixed(2) }} MB</div>
      <div>Heap Max: {{ latest.heapMemoryMax.toFixed(2) }} MB</div>
      <div>Threads: {{ latest.threadCount }}</div>
      <div>System Load: {{ latest.systemLoad.toFixed(2) }}</div>
    </div>

    <div id="heapChart" style="width: 100%; height: 300px;"></div>
    <div id="threadChart" style="width: 100%; height: 300px; margin-top:20px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';

export default {
  name: 'JvmDashboard',
  data() {
    return {
      latest: {
        heapMemoryUsed: 0,
        heapMemoryMax: 0,
        threadCount: 0,
        systemLoad: 0
      },
      history: [],
      heapChart: null,
      threadChart: null
    };
  },
  mounted() {
    // 初始化图表实例
    this.heapChart = echarts.init(document.getElementById('heapChart'));
    this.threadChart = echarts.init(document.getElementById('threadChart'));

    // 首次获取数据
    this.fetchData();

    // 定时刷新
    setInterval(this.fetchData, 5000);

    // 窗口缩放自适应
    window.addEventListener('resize', () => {
      this.heapChart.resize();
      this.threadChart.resize();
    });
  },
  methods: {
    async fetchData() {
      try {
        // 拉取最新数据
        const latestResp = await axios.get('http://localhost:8080/api/metrics/latest');
        this.latest = latestResp.data;

        // 拉取历史数据
        const historyResp = await axios.get('http://localhost:8080/api/metrics/history?limit=20');
        this.history = historyResp.data.reverse();

        // 渲染图表
        this.renderHeapChart();
        this.renderThreadChart();
      } catch (err) {
        console.error('获取监控数据失败:', err);
      }
    },
    renderHeapChart() {
      const xData = this.history.map(item =>
        new Date(item.collectedAt).toLocaleTimeString()
      );
      const usedData = this.history.map(item => item.heapMemoryUsed);
      const maxData = this.history.map(item => item.heapMemoryMax);

      this.heapChart.setOption({
        title: { text: 'Heap 内存使用量 (MB)' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value' },
        legend: { data: ['Used', 'Max'] },
        series: [
          { name: 'Used', type: 'line', data: usedData },
          { name: 'Max', type: 'line', data: maxData }
        ]
      });
    },
    renderThreadChart() {
      const xData = this.history.map(item =>
        new Date(item.collectedAt).toLocaleTimeString()
      );
      const threadData = this.history.map(item => item.threadCount);

      this.threadChart.setOption({
        title: { text: '线程数' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: xData },
        yAxis: { type: 'value' },
        legend: { data: ['Threads'] },
        series: [
          { name: 'Threads', type: 'line', data: threadData }
        ]
      });
    }
  }
};
</script>

<style>
.cards {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.cards > div {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
